<template>
  <div class="pro-desc">
    <div class="pro-name">
      <h3>{{ info.store_name }}</h3>
      <!-- //todo -->
      <div class="pro-label">
        <a href="">塑料瓶</a>
        <a href="">塑料</a>
        <a href="">分装</a>
      </div>
    </div>

    <div class="content">
      <show-image :pics="info.slider_image" />
      <div class="desc">
        <p class="pro-number">产品编号：{{ info.product_code || '无' }}</p>
        <div class="pro-features clearfix">
          <div class="feature">
            <a href="" v-print>
              <img src="../assets/images/print.png" alt="" />
              打印
            </a>
          </div>
          <div class="feature cursor" v-clipboard:copy="url" v-clipboard:success="onCopy" v-clipboard:error="onError">
            <a href="">
              <img src="../assets/images/share.png" alt="" />
              分享
            </a>
          </div>
          <div class="feature cursor" @click="collect">
            <a v-if="!Boolean(info.is_hide_product)">
              <van-icon name="like-o" size="20" />
              <span>收藏</span>
            </a>
            <a v-else>
              <van-icon name="like" color="#E38B2B" size="20" />
              <span>取消收藏</span>
            </a>
          </div>
        </div>
        <p>产品价格（单位 Pc)</p>
        <p class="discount-time" v-if="info.zhekou && info.zhekou.start_time">折扣时间：{{ info.zhekou && info.zhekou.start_time }} - {{ info.zhekou && info.zhekou.end_time }}</p>
        <p class="discount">折扣价</p>
        <p class="price">￥{{ info.price }}</p>
        <p class="old-price">
          原价
          <span>￥{{ info.ot_price }}</span>
        </p>
        <div class="progress">
          <p>检测服务流程：</p>
          <p class="txt">下单，可备注留言 — 付款 — 买家寄送样品、提供单号，如无可跳过 — 卖家确认测试日期 — 卖家上传/发送报告（文件或链接）— 确认业务完成 — 评价</p>
        </div>
        <p class="notice">商家备注：{{ info.content }}</p>
        <div class="num">
          <label>
            数量:
            <input type="text" v-model="info.pcs" @change="pcsChange" />
          </label>
          Pcs
        </div>
        <cart :id="info.product_id" :mid="info.mer_id" :number="info.pcs" />
        <div class="roomfix"></div>
      </div>

      <div class="shop-info">
        <div class="shop">
          <div class="Corporate">
            <h3>商家信息</h3>
            <div class="item certify">
              <img v-if="isPackmate" style="margin-right: 10px" src="~/assets/images/certification.png" alt="已认证" />
              <img v-if="!isPackmate" style="margin-right: 10px" src="~/assets/images/not_certified.png" alt="未认证" />
              {{ isPackmate ? '已认证' : '未认证' }}
              <!-- //TODO 缺少是否认证参数 -->
            </div>
          </div>
          <div class="info">
            <a href="#">
              <div class="com-logo"><img class="object" src="../assets/images/officelogo.png" alt="" /></div>
              <p class="company">{{ info.merchant && info.merchant.mer_name }}</p>
            </a>
            <p style="display: flex; align-items: center">
              <img src="~/assets/images/settle-date.png" width="20" height="20" alt="" />
              <span style="margin-left: 10px">入驻时间：{{ info.create_time.substring(0, 4) }}年</span>
            </p>
            <p style="display: flex; align-items: center">
              <img src="~/assets/images/score-star.png" alt="" />
              <span style="margin-left: 10px">综合评分：{{ info.rate }}分</span>
            </p>
          </div>
        </div>
        <div class="approve" v-if="info.merchant && info.merchant.is_pack_mate">认证</div>
      </div>
    </div>
  </div>
</template>

<script>
import ShowImage from './common/ShowImage';
import Cart from './common/cart/Cart';
import { collectPro } from '@/request/api';
import { Icon } from 'vant';
import Vue from 'vue';
Vue.use(Icon);

export default {
  name: 'ProductDesc',
  components: {
    ShowImage,
    Cart
  },
  props: {
    info: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      isPackmate: true,
      url: window.location.href
    };
  },
  methods: {
    pcsChange() {
      if (this.info.pcs < this.info.moq) {
        this.info.pcs = this.info.moq;
        return this.$toastVant.fail('数量不可低于起订量！');
      }
    },
    onCopy(e) {
      this.$toastVant.success('分享链接复制成功');
    },
    onError(e) {
      this.$message.error('抱歉，复制失败！');
    },
    collect() {
      let that = this;
      let data = {
        type_id: this.info.product_id,
        type: 1
      };
      collectPro(data)
        .then(res => {
          if (res.status === 200) {
            that.$toastVant.success(res.message || '收藏成功！');
            this.info.is_hide_product = !this.info.is_hide_product;
          }
        })
        .catch(err => {
          this.$message.error(err.message);
        });
    }
  }
};
</script>

<style scoped>
.pro-desc {
  padding: 30px 30px 40px;
  background: #fff;
}

.pro-name h3 {
  font-size: 24px;
  font-weight: 400;
  color: rgb(77, 77, 77);
  margin-bottom: 20px;
}

.pro-label a {
  display: inline-block;
  font-size: 14px;
  color: #fff;
  background: rgb(227, 139, 43);
  border-radius: 14px;
  padding: 1px 25px;
  margin-right: 13px;
}

.content {
  width: 100%;
  display: flex;
  margin-top: 33px;
}
.Corporate {
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-bottom: 1px solid #e9e9e9;
}
.certify {
  display: flex;
  align-items: center;
  padding-bottom: 11px;
}
.desc {
  flex: 1;
  font-size: 16px;
  color: #656565;
  margin-left: 40px;
  margin-right: 40px;
  line-height: 24px;
  position: relative;
}

.pro-features {
  margin: 16px 0;
  font-size: 14px;
  color: #959595;
}

.pro-features .feature {
  float: left;
  margin-right: 48px;
}

.pro-features .feature img {
  margin-right: 4px;
  vertical-align: middle;
  position: relative;
  top: -2px;
}

.desc .price {
  font-size: 48px;
  color: rgb(227, 139, 44);
  margin: 14px 0 27px 47px;
}

.desc .old-price {
  color: #b5b5b5;
  margin-bottom: 25px;
}

.desc .old-price span {
  font-size: 24px;
  text-decoration: line-through;
  margin-left: 20px;
}

.progress .txt {
  font-size: 14px;
  margin: 17px 0 24px;
  color: rgb(149, 149, 149);
}

.num {
  margin: 20px 0;
}

.num input {
  width: 245px;
  height: 45px;
  border: 1px solid rgb(101, 101, 101);
  border-radius: 10px;
  margin: 0 10px;
  padding: 0 10px;
}

.shop-info {
  width: 208px;
  height: auto;
}

.shop-info .shop {
  color: #fff;
  background: #fff;
  padding: 16px 8px;
  border: solid 1px #e48b2c;
}

.shop-info .shop h3 {
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  color: #e48b2c;
  background: #fff;
  padding-bottom: 11px;
  /* border-bottom: 1px solid #fff; */
}

.com-logo {
  width: 190px;
  height: 90px;
  margin-top: 12px;
}

.shop-info .shop p {
  font-size: 16px;
  margin-top: 12px;
}

.approve {
  width: 100%;
  font-size: 18px;
  font-weight: bold;
  padding: 12px 0;
  text-align: center;
  color: #fff;
  background: #0085e8;
}

.roomfix {
  height: 30px;
}

.heart {
  position: relative;
  top: 2px;
  display: inline-block;
  width: 20px;
  height: 20px;
  background-size: 50px;
  background: url('~@/assets/images/shoucanglogo.png') -4px -3px;
}

.feature span {
  position: relative;
  top: -2px;
  left: 6px;
}
</style>
